<template>
    <van-nav-bar title="订单详情" left-arrow @click-left="back" />
    <section class="aui-flexView">
      <!-- 订单详细 -->
      <section class="aui-scrollView">
        <!-- 订单状态 -->
        <div class="aui-pay-change">
          <div class="aui-flex">
            <div class="aui-flex-box">
              <h3>{{orderInfo.status_text}}</h3>
            </div>
            <div class="aui-pay-zfb">
              <img src="/assets/images/icon-zfb.png" alt="" />
            </div>
          </div>
        </div>
        
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <!-- 评分 -->
                <van-field
                label="评分" 
                :rules="[
                            { required: true, message: '请选择评分' },
                            { validator: item=>item>0, message: '请选择评分' },
                        ]"
                name="state"
                >
                    <template #input>
                        <van-rate
                        v-model="rate" 
                        allow-half 
                        />
                    </template>
                </van-field>
                <!-- 评价 -->
                <van-field
                    v-model="message"
                    rows="2"
                    autosize
                    label="评价"
                    type="textarea"
                    maxlength="150"
                    placeholder="请输入评价"
                    show-word-limit
                    name="comment"
                    :rules="[{ required: true, message: '请输入评价' }]"
                />
                <!-- 文件上传 -->
                <van-field name="imageList" label="上传图片">
                    <template #input>
                        <van-uploader multiple v-model="imageList" />
                    </template>
                </van-field>
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                提交
                </van-button>
            </div>
            </van-form>
        

  
        <div class="divHeight b-line"></div>
  

      </section>
    </section>
</template>

<script setup>
import { onBeforeMount } from "vue";

    const {proxy} = getCurrentInstance();
    const back = () => proxy.$router.push("/order/index");

    onBeforeMount(()=>{
        getData()
    })

    // 发送请求，获得订单信息
    const userInfo = proxy.$cookies.get("business")?proxy.$cookies.get("business"):{};
    const orderid = proxy.$route.query.orderid?proxy.$route.query.orderid:0
    const orderProductId = proxy.$route.query.orderProductId?proxy.$route.query.orderProductId:0
    let orderInfo = ref({
        express:{}
    });
    const getData = async () => {
        let data = {
            busid:userInfo.id,
            orderid:orderid
        }
        let result = await proxy.$POST({
            url:"/business/orderInfo",
            params:data
        })
        if(result.code){
            orderInfo.value = result.data
            return false
        }else{
            proxy.$fail(result.msg);
            return false
        }
    }

    // 表单部分
    const onSubmit = async (values) => {
        let data = new FormData()
        data.append('busid',userInfo.id)
        data.append('orderid',orderid)
        data.append('orderProductId',orderProductId)
        data.append('rate',rate.value)
        data.append('comment',message.value)
        if(imageList.value.length){
            imageList.value.forEach(element => {
                data.append('img[]',element.file)
            });
        }
        let result = await proxy.$POST({
            url:"/business/comment",
            params:data
        })
        if(result.code){
            proxy.$success({
                message:result.msg,
                duration:1000,
                onClose:()=>{
                    history.back()
                }
            })
        }else{
            proxy.$fail(result.msg);
            return false
        }
    };
    const rate = ref(0)
    const imageList = ref([]);
    const message = ref("")

</script>

<style>
    
</style>